<div class="jumbotron">
  <form ng-submit="runSearch()">
    <input focus-input="response == ''" ng-target="searchTarget" id="searchQueryID" ng-model="searchQuery" name="searchQuery" type="search" placeholder="Enter Song Name ..." class="form-control input-md"  autofocus/>
    <button id="search" name="search" class="btn btn-primary">Find My Song</button> 
		<button id="clear" name="clear" class = "btn" ng-if="response.lyrics" ng-click="clearSearch($event)">Start Over</button>
  </form>


  <div ng-if="response" id="inner-content">

    <div ng-if="response.lyrics" id="lyrics-content" class="lyrics-text">
			<div id="lyrics-suggestions-box" ng-if="response.lyrics.suggestions" class="lyrics-suggestions-box">
			<span style="color:gray">Additional Matches</span>
			 <ul style="list-style:none;" class="lyrics-suggestions" id="lyrics-suggestions">
					<li ng-repeat="suggestion in response.lyrics.suggestions"><a href="#" data="{{ suggestion }}" ng-click="showSuggestion(suggestion, $event);">{{ suggestion }}</a></li>
			 </ul>
			</div>
			<h5><a href="#" ng-click="favorite(response.lyrics.song_id, $event)"><img height="15px" width="15px" src="/images/favorites.png" title="Save To Favorites" /></a> <a href="{{ response.lyrics.url }}" target="_blank" title="Open In New Window"><u>{{ response.lyrics.url }}</u></a> </h5>
      <ul style="list-style:none;">
				<li ng-repeat="line in response.lyrics.lyrics">
					{{ line }}
				</li>
      </ul>
    </div>
		<div ng-if="response.error">
			Sorry, no songs found....
    </div>
 </div>
 <div ng-if="!response.lyrics && favorites">
	 <h4>Favorites</h4>
	  <ul style="list-style:none;">
				<li ng-repeat="fave in favorites">
					<a href="#" data="{{ fave.url }}" ng-click="showSuggestion(fave.url, $event)">{{ fave.url }}</a>
				</li>
      </ul>
   
 </div>
</div>

